<template>
  <div class="login-page">
    <van-nav-bar
  left-arrow
  @click-left="onClickLeft"
/>

    <div id="masg">短信登录</div>

<van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="mobile"
    placeholder="请输入手机号"
    :rules="[{ required: true, message: '请输入手机号' },
    { pattern: /^\w{5,}$/, message: '用户名至少包含5个字符' }]"
    ref="mobile"
  />
  <van-field
  v-model="code"
  name="code"
  center
  clearable
  placeholder="请输入验证码"
>
  <template #button>
    <van-button size="small" plain color="#999999" type="primary" @click="mesg">发送验证码</van-button>
  </template>
</van-field>
  <div style="margin: 16px;">
    <van-button block type="info" native-type="submit" >登录</van-button>
  </div>
  </van-form>

  </div>
</template>

<script>
import { Toast } from 'vant'
import { login, duanxin } from '@/api/user'
import { setToken } from '@/utils/storage'
export default {
  data () {
    return {
      username: '',
      code: ''
    }
  },
  methods: {
    // 短信请求
    async mesg () {
      const res = await duanxin(this.$refs.mobile.value)
      console.log(res)
    },
    // 登录请求
    async onSubmit (values) {
      // data.token
      const res = await login(values)
      // console.log(res)
      // 存入token
      setToken(res.data.token)
      Toast.success('登录成功')
      this.$router.push('/user')
    },
    onClickLeft () {
      this.$router.back()
    }
    // async getApiu (mobile, code) {
    //   const { data } = await login({
    //     mobile,
    //     code
    //   })
    //   localStorage.setItem('token', data.token)
    // },
    // toLogin () {
    //   // this.getApiu(this.username, this.sms)
    //   Toast.success('登录成功')
    //   this.$router.push('/user')
    // },

  }
}
</script>

<style>
#masg{
    margin-left:15px;
    height: 80px;
    font-size: 20px;
    line-height: 80px;
}
</style>
